{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>发现 - ShortVid</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="{% static 'home/home.css' %}">
	<style>
		:root {
			--primary-color: #6c5ce7;
			--secondary-color: #a29bfe;
			--accent-color: #fd79a8;
			--dark-color: #2d3436;
			--light-color: #f7f7f7;
			--gradient: linear-gradient(135deg, #6c5ce7, #a29bfe);
		}
		
		body { 
			font-family: 'Poppins', sans-serif; 
			background: linear-gradient(-45deg, #f8f9fa, #e9ecef, #f8f9fa, #e9ecef);
			background-size: 400% 400%;
			animation: gradientBG 15s ease infinite;
			color: var(--dark-color); 
			min-height: 100vh;
		}
		
		@keyframes gradientBG {
			0% { background-position: 0% 50%; }
			50% { background-position: 100% 50%; }
			100% { background-position: 0% 50%; }
		}
		
		.navbar { 
			backdrop-filter: blur(10px);
			background: rgba(255, 255, 255, 0.85) !important;
			border-bottom: 1px solid rgba(108, 92, 231, 0.1);
		}
		
		.navbar-brand { 
			font-weight: 700; 
			color: var(--primary-color) !important;
			position: relative;
		}
		
		.navbar-brand::after {
			content: '';
			position: absolute;
			bottom: -5px;
			left: 0;
			width: 0;
			height: 3px;
			background: var(--accent-color);
			transition: width 0.3s ease;
		}
		
		.navbar-brand:hover::after {
			width: 100%;
		}
		
		.nav-link {
			position: relative;
			font-weight: 500;
			margin: 0 5px;
			transition: all 0.3s ease;
		}
		
		.nav-link::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 0;
			height: 2px;
			background: var(--primary-color);
			transition: width 0.3s ease;
		}
		
		.nav-link:hover::after,
		.nav-link.active::after {
			width: 100%;
		}
		
		.feed-container { 
			max-width: 720px; 
			margin: 30px auto; 
			position: relative;
		}
		
		.video-item { 
			position: relative; 
			border-radius: 16px; 
			overflow: hidden; 
			background: #000; 
			margin-bottom: 24px; 
			box-shadow: 0 10px 24px rgba(0,0,0,0.08);
			transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
			border: 2px solid transparent;
		}
		
		.video-item:hover {
			transform: translateY(-8px);
			box-shadow: 0 20px 30px rgba(108, 92, 231, 0.2);
			border-color: rgba(108, 92, 231, 0.3);
		}
		
		.video-item::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius: 16px;
			padding: 2px;
			background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
			-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
			mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
			-webkit-mask-composite: xor;
			mask-composite: exclude;
			opacity: 0;
			transition: opacity 0.4s ease;
			z-index: 1;
		}
		
		.video-item:hover::before {
			opacity: 1;
		}
		
		.video-item video { 
			width: 100%; 
			height: 480px; 
			object-fit: cover; 
			display: block; 
			transition: transform 0.5s ease;
		}
		
		.video-item:hover video {
			transform: scale(1.03);
		}
		
		.video-overlay { 
			position: absolute; 
			left: 0; 
			right: 0; 
			bottom: 0; 
			padding: 16px; 
			color: #fff; 
			background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%);
			z-index: 2;
		}
		
		.creator { 
			font-weight: 600; 
			font-size: 1.1rem;
			display: flex;
			align-items: center;
		}
		
		.creator::before {
			content: '';
			display: inline-block;
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: var(--accent-color);
			margin-right: 8px;
		}
		
		.actions { 
			position: absolute; 
			right: 12px; 
			bottom: 80px; 
			display: flex; 
			flex-direction: column; 
			gap: 14px; 
			z-index: 2;
		}
		
		.actions .btn { 
			width: 44px; 
			height: 44px; 
			border-radius: 50%; 
			display: inline-flex; 
			align-items: center; 
			justify-content: center; 
			background: rgba(0,0,0,.5); 
			color: #fff; 
			border: none; 
			transition: all 0.3s ease;
			position: relative;
			overflow: hidden;
		}
		
		.actions .btn:hover {
			transform: scale(1.1);
			background: var(--primary-color);
			box-shadow: 0 0 15px rgba(108, 92, 231, 0.6);
		}
		
		.actions .btn:active {
			transform: scale(0.95);
		}
		
		.actions .btn::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 5px;
			height: 5px;
			background: rgba(255, 255, 255, 0.5);
			opacity: 0;
			border-radius: 100%;
			transform: scale(1, 1) translate(-50%);
			transform-origin: 50% 50%;
		}
		
		.actions .btn:focus:not(:active)::after {
			animation: ripple 1s ease-out;
		}
		
		@keyframes ripple {
			0% {
				transform: scale(0, 0);
				opacity: 0.5;
			}
			100% {
				transform: scale(20, 20);
				opacity: 0;
			}
		}
		
		.tag { 
			display: inline-block; 
			background: rgba(255,255,255,.18); 
			border: 1px solid rgba(255,255,255,.28); 
			color: #fff; 
			padding: 2px 10px; 
			border-radius: 999px; 
			font-size: 12px; 
			margin-right: 8px;
			transition: all 0.3s ease;
		}
		
		.tag:hover {
			background: rgba(255,255,255,.3);
			transform: translateY(-2px);
		}
		
		.empty-hint { 
			text-align: center; 
			color: #777; 
			margin-top: 40px;
			padding: 20px;
			background: rgba(255,255,255,0.7);
			border-radius: 12px;
			backdrop-filter: blur(5px);
			box-shadow: 0 5px 15px rgba(0,0,0,0.05);
		}
		
		.scroll-indicator {
			position: fixed;
			bottom: 20px;
			right: 20px;
			width: 40px;
			height: 40px;
			background: var(--primary-color);
			color: white;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 4px 12px rgba(108, 92, 231, 0.4);
			transition: all 0.3s ease;
			z-index: 1000;
			opacity: 0;
			transform: translateY(20px);
		}
		
		.scroll-indicator.show {
			opacity: 1;
			transform: translateY(0);
		}
		
		.scroll-indicator:hover {
			transform: translateY(-5px);
			box-shadow: 0 6px 16px rgba(108, 92, 231, 0.5);
		}
		
		.loading-spinner {
			display: none;
			text-align: center;
			padding: 20px;
		}
		
		.spinner {
			width: 40px;
			height: 40px;
			border: 4px solid rgba(108, 92, 231, 0.2);
			border-left-color: var(--primary-color);
			border-radius: 50%;
			animation: spin 1s linear infinite;
			margin: 0 auto;
		}
		
		@keyframes spin {
			to { transform: rotate(360deg); }
		}
		
		/* 响应式调整 */
		@media (max-width: 768px) {
			.video-item video { height: 400px; }
			.feed-container { margin: 15px auto; }
		}
		
		@media (max-width: 576px) {
			.video-item video { height: 320px; }
		}
	</style>
</head>
<body>
	<nav class="navbar navbar-expand-lg navbar-light py-3 fixed-top">
		<div class="container">
			<a class="navbar-brand" href="{% url 'home' %}"><i class="fas fa-play-circle me-2"></i>ShortVid</a>
			<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navbarNav">
				<ul class="navbar-nav me-auto">
					<li class="nav-item"><a class="nav-link" href="{% url 'home' %}">首页</a></li>
					<li class="nav-item"><a class="nav-link active" href="{% url 'discover' %}">发现</a></li>
					<li class="nav-item"><a class="nav-link" href="{% url 'hot' %}">热门</a></li>
					{% if user.is_authenticated %}
						<li class="nav-item"><a class="nav-link" href="{% url 'following' %}">关注</a></li>
					{% else %}
						<li class="nav-item"><a class="nav-link" href="{% url 'login' %}?next={% url 'following' %}" onclick="return remindLogin()">关注</a></li>
					{% endif %}
				</ul>
				<div class="d-flex align-items-center">
					{% if user.is_authenticated %}
						<a href="{% url 'profile' %}" class="d-flex align-items-center me-3 text-decoration-none">
							<div class="user-avatar">{{ user.username|first|upper }}</div>
							<span class="user-greeting ms-2">你好, {{ user.username }}!</span>
						</a>
						<a href="{% url 'logout' %}" class="btn btn-outline-primary btn-sm">注销</a>
					{% else %}
						<a href="{% url 'login' %}" class="btn btn-outline-primary me-2">登录</a>
						<a href="{% url 'register' %}" class="btn btn-primary">注册</a>
					{% endif %}
				</div>
			</div>
		</div>
	</nav>

	<main class="feed-container" style="margin-top: 80px;">
		<!-- 示例短视频流：可上下滑动浏览，视频进入视口自动播放，离开暂停 -->
		<div class="video-item" data-video-url="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" data-creator="热门创作者">
			<video preload="metadata" muted playsinline loop>
				<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
			</video>
			<div class="actions">
				<button class="btn act-like" title="点赞"><i class="fa-regular fa-heart"></i></button>
				<button class="btn act-comment" title="评论"><i class="fa-regular fa-comment"></i></button>
				<button class="btn act-follow" title="关注创作者"><i class="fa-solid fa-user-plus"></i></button>
				<button class="btn act-fav" title="收藏"><i class="fa-solid fa-star"></i></button>
			</div>
			<div class="video-overlay">
				<div class="creator">@热门创作者</div>
				<div class="mt-1"><span class="tag">#风景</span><span class="tag">#自然</span></div>
				<div class="small text-white-50 mt-1">春日短片 · 12.3万播放</div>
			</div>
		</div>

		<div class="video-item" data-video-url="https://www.w3schools.com/html/mov_bbb.mp4" data-creator="美食达人">
			<video preload="metadata" muted playsinline loop>
				<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
			</video>
			<div class="actions">
				<button class="btn act-like" title="点赞"><i class="fa-regular fa-heart"></i></button>
				<button class="btn act-comment" title="评论"><i class="fa-regular fa-comment"></i></button>
				<button class="btn act-follow" title="关注创作者"><i class="fa-solid fa-user-plus"></i></button>
				<button class="btn act-fav" title="收藏"><i class="fa-solid fa-star"></i></button>
			</div>
			<div class="video-overlay">
				<div class="creator">@美食达人</div>
				<div class="mt-1"><span class="tag">#美食</span><span class="tag">#教程</span></div>
				<div class="small text-white-50 mt-1">创意料理 · 8.7万播放</div>
			</div>
		</div>

		<div class="video-item" data-video-url="https://media.w3.org/2010/05/sintel/trailer.mp4" data-creator="旅行家">
			<video preload="metadata" muted playsinline loop>
				<source src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
			</video>
			<div class="actions">
				<button class="btn act-like" title="点赞"><i class="fa-regular fa-heart"></i></button>
				<button class="btn act-comment" title="评论"><i class="fa-regular fa-comment"></i></button>
				<button class="btn act-follow" title="关注创作者"><i class="fa-solid fa-user-plus"></i></button>
				<button class="btn act-fav" title="收藏"><i class="fa-solid fa-star"></i></button>
			</div>
			<div class="video-overlay">
				<div class="creator">@旅行家</div>
				<div class="mt-1"><span class="tag">#旅行</span><span class="tag">#城市</span></div>
				<div class="small text-white-50 mt-1">城市漫游 · 20.1万播放</div>
			</div>
		</div>
		
		<div class="loading-spinner" id="loadingSpinner">
			<div class="spinner"></div>
			<p class="mt-2">正在加载更多内容...</p>
		</div>

		<p class="empty-hint">已经到底了，稍后会为你加载更多～</p>
	</main>
	
	<div class="scroll-indicator" id="scrollToTop">
		<i class="fas fa-arrow-up"></i>
	</div>

	<!-- 页脚（与首页一致） -->
	<footer class="footer">
		<div class="container">
			<div class="row">
				<div class="col-lg-4 mb-4">
					<h4 class="mb-4"><i class="fas fa-play-circle me-2"></i>ShortVid</h4>
					<p>发现精彩短视频，记录美好生活瞬间。加入我们的社区，一起创作、分享和发现。</p>
					<div class="social-icons mt-4">
						<a href="#"><i class="fab fa-weibo"></i></a>
						<a href="#"><i class="fab fa-weixin"></i></a>
						<a href="#"><i class="fab fa-qq"></i></a>
						<a href="#"><i class="fab fa-github"></i></a>
					</div>
				</div>
				<div class="col-lg-2 col-md-6 mb-4">
					<h5 class="mb-4">平台</h5>
					<ul class="list-unstyled">
						<li class="mb-2"><a href="{% url 'home' %}">首页</a></li>
						<li class="mb-2"><a href="{% url 'discover' %}">发现</a></li>
						<li class="mb-2"><a href="{% url 'hot' %}">热门</a></li>
						{% if user.is_authenticated %}
							<li class="mb-2"><a href="{% url 'following' %}">关注</a></li>
						{% else %}
							<li class="mb-2"><a href="{% url 'login' %}?next={% url 'following' %}" onclick="return remindLogin()">关注</a></li>
						{% endif %}
					</ul>
				</div>
				<div class="col-lg-2 col-md-6 mb-4">
					<h5 class="mb-4">帮助</h5>
					<ul class="list-unstyled">
						<li class="mb-2"><a href="#">帮助中心</a></li>
						<li class="mb-2"><a href="#">使用指南</a></li>
						<li class="mb-2"><a href="#">社区准则</a></li>
						<li class="mb-2"><a href="#">联系我们</a></li>
					</ul>
				</div>
				<div class="col-lg-4 mb-4">
					<h5 class="mb-4">订阅我们的资讯</h5>
					<p>获取最新功能和活动信息</p>
					<div class="input-group mb-3">
						<input type="email" class="form-control" placeholder="请输入您的邮箱">
						<button class="btn btn-primary" type="button">订阅</button>
					</div>
				</div>
			</div>
			<hr class="my-4">
			<div class="text-center"><p>&copy; 2023 ShortVid 短视频平台. 保留所有权利.</p></div>
		</div>
	</footer>

	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
	<script src="{% static 'home/home.js' %}"></script>
	<script>
		function remindLogin() {
			alert('请先登录后查看关注内容');
			return true;
		}

		// 登录上下文变量
		window.CURRENT_USER = "{{ user.username|default:'' }}";
		window.IS_AUTH = "{{ user.is_authenticated|yesno:'true,false' }}" === 'true';
		window.redirectToLogin = function(){
			location.href = "{% url 'login' %}?next=" + encodeURIComponent(location.pathname + location.search);
		};

		// 自动播放/暂停：当视频 60% 可见时播放，移出视口暂停
		const options = { threshold: 0.6 };
		const io = new IntersectionObserver((entries) => {
			entries.forEach(entry => {
				const video = entry.target;
				if (entry.isIntersecting) {
					video.play().catch(() => {});
				} else {
					video.pause();
				}
			});
		}, options);
		document.querySelectorAll('.video-item video').forEach(v => io.observe(v));
		
		// 滚动到顶部按钮
		const scrollToTopBtn = document.getElementById('scrollToTop');
		
		window.addEventListener('scroll', () => {
			if (window.pageYOffset > 300) {
				scrollToTopBtn.classList.add('show');
			} else {
				scrollToTopBtn.classList.remove('show');
			}
		});
		
		scrollToTopBtn.addEventListener('click', () => {
			window.scrollTo({
				top: 0,
				behavior: 'smooth'
			});
		});
		
		// 模拟加载更多内容
		const loadingSpinner = document.getElementById('loadingSpinner');
		const emptyHint = document.querySelector('.empty-hint');
		
		// 模拟加载更多
		setTimeout(() => {
			loadingSpinner.style.display = 'block';
			emptyHint.style.display = 'none';
			
			setTimeout(() => {
				loadingSpinner.style.display = 'none';
				emptyHint.style.display = 'block';
			}, 2000);
		}, 3000);
		
		// 向 /api/request 发送动作
		function buildPayload(type, ext){
			const ts = new Date().toISOString();
			const user = (window.CURRENT_USER||'').trim();
			switch(type){
				case 'like': return { operation:'insert', table:'like', data:{ user, ...ext, ts } };
				case 'comment': return { operation:'insert', table:'comment', data:{ user, ...ext, ts } };
				case 'follow': return { operation:'insert', table:'follow', data:{ follower: user, ...ext, ts } };
				case 'favorite': return { operation:'insert', table:'favorite', data:{ user, ...ext, ts } };
				default: return { operation:'noop', data:{ user, ts } };
			}
		}
		async function sendAction(type, payload){
			if(!window.IS_AUTH){
				alert('请先登录再进行此操作');
				window.redirectToLogin && window.redirectToLogin();
				return;
			}
			try{
				await fetch('/api/request', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(buildPayload(type, payload)) });
				console.log('已发送', type, payload);
			}catch(e){ console.error(e); }
		}

		// 绑定按钮事件
		document.querySelectorAll('.video-item').forEach(item => {
			const url = item.getAttribute('data-video-url');
			const creator = item.getAttribute('data-creator');
			item.querySelector('.act-like')?.addEventListener('click', (e)=>{ e.preventDefault(); sendAction('like', { video_url: url }); });
			item.querySelector('.act-comment')?.addEventListener('click', (e)=>{ e.preventDefault(); const content = prompt('输入评论内容：'); if(content && content.trim()) sendAction('comment', { video_url: url, content: content.trim() }); });
			item.querySelector('.act-follow')?.addEventListener('click', (e)=>{ e.preventDefault(); sendAction('follow', { creator }); });
			item.querySelector('.act-fav')?.addEventListener('click', (e)=>{ e.preventDefault(); sendAction('favorite', { video_url: url }); });
		});
	</script>
</body>
</html>